<template>
  <footer class="flex aic jc-sa">
    <p
      @click="change(item, index)"
      v-for="(item, index) in list"
      :key="item.bible_userId"
      class="item flex fdc aic jc-c"
      :class="{ active: index === store.activeIndex }"
    >
      <img v-if="index === store.activeIndex" :src="`/img/${item.icon}`" alt="" />
      <img v-else :src="`/img/${item.icon2}`" alt="" />
      <span>{{ item.role }}</span>
    </p>
  </footer>
</template> 
  
  <script setup>
import { ref } from "vue";
import { useStore } from "../../pinia";
import request from "../../api/request";

const store = useStore(); 

let list = ref([
  {
    username: "huruqing",
    role: "爸爸",
    icon: "hrq.png",
    icon2: "hrq2.png",
    bible_userId: "673b5290049311f09b26972fb1ee7e2b",
  },
  {
    username: "huyiyi",
    role: "妈妈",
    icon: "hy.png",
    icon2: "hy2.png",
    bible_userId: "6558be90055111f083c38907fcd93ef5",
  },
  {
    username: "huyueyin",
    role: "女儿",
    icon: "hyy.png",
    icon2: "hyy2.png",
    bible_userId: "6c388a60055111f083c38907fcd93ef5",
  },
]);

// 切换用户
const change = async (item, index) => {
  store.$patch((state) => {
    state.activeIndex = index;
    state.user = item;
  });

  let res = await request.get("/bible_book/all");
  let bookList = res.data;
  store.$patch((state) => {
    state.bookList = bookList;
  });

  // 找到正在读的书卷
  let book = bookList.find((item) => item.readStatus === 2);
  let bookName = "";
  let isNew = true;
  // 若书本存在就定位到该书本
  if (book) {
    isNew = book.isNew;
    bookName = book.name;
  } else {
    bookName = "太";
  }

  store.$patch((state) => {
    state.isNew = isNew;
    state.currBook = bookName;
  });
  store.getTodayReadNum();
  store.getChapterList(bookName);
  store.getWeekNumber(); // 本周读经数
};
</script>
  
  <style lang="less">
//   #app {
//     padding-bottom: 60px;
//   }
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  .item {
    color: #999;
  }
  img {
    border: none;
  }
  .item.active {
    color: #cd0200; 
  }
  // height: 50px;
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  span {
    margin-top: 5px;
  }
  padding: 5px 0;
}
</style>
  